require('./PagePaystatistics.styl');

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { Table, DatetimeField, Button } = SaltUI;
import {CSVLink} from 'react-csv';


class Paystatistics extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            startTime: "",//new Date().getTime()
            headers: [
                {label: '项目编号', key: 'proj_num'},
                {label: '项目名称', key: 'proj_name'},
                {label: '确认书号', key: 'confirmNum'},
                {label: '预算年度', key: 'annual'},
                {label: '预算金额', key: 'budget'},
                {label: '承建方', key: 'builder'},
                {label: '合同金额', key: 'proTotalMoney'},
                {label: '实际支付金额', key: 'payMoney'},
                {label: '未支付金额', key: 'unPayMoney'},
            ],
            columns: [
                { dataKey: 'proj_num', title: '项目编号', align: 'center', width: "0.10" },
                { dataKey: 'proj_name', title: '项目名称', align: 'center', width: "0.10" },
                { dataKey: 'confirmNum', title: '确认书号', align: 'center', width: "0.10" },
                { dataKey: 'annual', title: '预算年度', align: 'center', width: "0.10" },
                { dataKey: 'budget', title: '预算金额', align: 'center', width: "0.10" },
                { dataKey: 'builder', title: '承建方', align: 'center', width: "0.10" },
                { dataKey: 'proTotalMoney', title: '合同金额', align: 'center', width: "0.10" },
                { dataKey: 'payMoney', title: '实际支付金额', align: 'center', width:"0.155" },
                { dataKey: 'unPayMoney', title: '未支付金额', align: 'center', width:"0.14" },
          ],
          table_data:{
            data: [],
            currentPage: 1,
          }
        };
        this.printEvent = this.printEvent.bind(this);
        this.resetEvent = this.resetEvent.bind(this);
    }

    handleChange(name, value) {
        var time_query = new Date(value).toLocaleDateString();
        if(time_query.indexOf('年') > -1){
            time_query = time_query.split("年")[0]
        }else{
            time_query = time_query.split("/")[0]
        }
        Actions.fetch(time_query)
        this.setState({
            [name]: value
        })
    }
    printEvent(){//打印
        var newstr = this.refs.table.mainTable.outerHTML;
        var iframe = document.createElement('iframe');
        iframe.onload = function () {
            iframe.contentWindow.document.body.innerHTML = newstr;
            iframe.contentWindow.print();
        }
        iframe.width = window.innerWidth;
        iframe.height = 0;
        iframe.src = '/blank.html';
        document.body.appendChild(iframe)
    }
    resetEvent(){
        Actions.fetch()
    }
    render() {
        let t = this
        let {startTime, columns, table_data, headers} = t.state
        return (
            <div className="paystatistics">
                <div className="table_query">
                <div className="query_box">
                    <DatetimeField
                        label="按年度查找"
                        columns={['年']}
                        className="time"
                        value={startTime}
                        onSelect={t
                        .handleChange
                        .bind(t, 'startTime')}/>
                    <Button className="reset_btn" onClick={t.resetEvent}>重置</Button>
                </div>
                <Button className="table_print table_btn" onClick={t.printEvent}>打印</Button>
                <CSVLink data={table_data.data} headers={headers}  target="_blank">
                    <Button className="table_print table_btn">导出</Button>
                </CSVLink>
            </div>
            <Table ref="table" columns={columns} data={table_data} leftFixed={0} showHeader/>
            </div>
        );
    }

    componentWillMount() {
        Actions.fetch();
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Paystatistics, Reflux.connect(Store));

module.exports = Paystatistics;
